<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部 -->
      <hearder @search="search">
        <template #left-search>
          <el-form-item label="区域搜索：">
            <el-input v-model="searchRegion.name" placeholder="请输入" clearable />
          </el-form-item>
        </template>
      </hearder>
      <!-- table主体 -->
      <tableMain :data-list="dataList" :create-dialog-show.sync="addDialogShow" :pager-info="searchRegion" @upPage="upPage" @nextPage="nextPage">
        <template #tableBody>
          <el-table-column
            type="index"
            label="序号"
            width="110"
          />
          <el-table-column
            prop="name"
            label="区域名称"
            width="448"
          />
          <el-table-column
            prop="nodeCount"
            label="点位数"
            width="446"
          />
          <el-table-column
            prop="remark"
            label="备注说明"
            width="446"
          />
          <el-table-column label="操作" width="220">
            <template slot-scope="{row}">
              <span class="info" @click="getInfo(row)">查看详情</span>
              <span class="info" @click="setInfo(row)">修改</span>
              <span class="del" @click="deleteIsMark()">删除</span>
            </template>
          </el-table-column>
        </template>
      </tableMain>
      <!-- 查看详细的弹窗 -->
      <getDialog v-if="getDialogShow" :get-dialog-show.sync="getDialogShow" title="区域详细">
        <template #body>
          <div class="areainfo">
            <el-row class="el-top" type="flex" justify="start" align="center">
              <el-col :span="4">区域名称：</el-col>
              <el-col :span="21">{{ areaInfo[0]? areaInfo[0].name : searchRegion.name }}</el-col>
            </el-row>
            <div class="main-zw" />
            <el-row type="flex" justify="start" align="center">
              <el-col :span="4">包含点位：</el-col>
              <el-col :span="21">
                <el-table
                  stripe
                  :data="areaInfo"
                  :header-cell-style="{background:'#f3f6fb'}"
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="80"
                  />
                  <el-table-column
                    prop="name"
                    label="点位名称"
                    width="158"
                  />
                  <el-table-column
                    prop="vmCount"
                    label="设备数量"
                    width="158"
                  />
                </el-table>
              </el-col>
            </el-row>
          </div>
        </template>
      </getDialog>
      <!-- 修改区域弹窗 -->
      <setDialog v-if="setDialogShow" :set-dialog-show.sync="setDialogShow" title="修改区域" @setInfoIsOk="setInfoIsOk">
        <template #body>
          <el-form ref="setForm" :rules="setRules" :model="setAreaF">
            <el-form-item class="setAreaF-item" label="区域名称：" prop="name">
              <el-input v-model="setAreaF.createDialogShow" class="setAreaF" placeholder="请输入" maxlength="15" />
            </el-form-item>
            <el-form-item class="setAreaF-item" label="备注说明：" prop="remark">
              <el-input v-model="setAreaF.remark" show-word-limit class="setAreaF" placeholder="请输入" maxlength="40" :rows="3" type="textarea" />
            </el-form-item>
          </el-form>
        </template>
      </setDialog>
      <!-- 新增模块弹窗 -->
      <setDialog v-if="addDialogShow" :set-dialog-show.sync="addDialogShow" title="新增区域" @setInfoIsOk="addInfoIsOk">
        <template #body>
          <el-form ref="addForm" :rules="addRules" :model="addAreaF">
            <el-form-item class="setAreaF-item" label="区域名称：" prop="regionName">
              <el-input v-model="addAreaF.regionName" class="setAreaF" placeholder="请输入" show-word-limit maxlength="15" />
            </el-form-item>
            <el-form-item class="setAreaF-item" label="备注说明：" prop="remark">
              <el-input v-model="addAreaF.remark" class="setAreaF" placeholder="请输入" show-word-limit maxlength="40" :rows="3" type="textarea" />
            </el-form-item>
          </el-form>
        </template>
      </setDialog>
    </div>
  </div>
</template>

<script>
import hearder from '@/components/searchHearder.vue'
import tableMain from '@/components/tableMain.vue'
import getDialog from '../component/getDialog.vue'
import setDialog from '../component/setDialog.vue'
import { getZoneListApi, getPTInfoApi, setAreaInfo, addAreaIfo } from '@/api'
export default {
  components: {
    hearder,
    tableMain,
    getDialog,
    setDialog
  },
  data() {
    return {
      searchRegion: {
        pageIndex: '1', // 当前页码
        pageSize: '10', // 每页数据
        name: '', // 收缩名称
        totalCount: '0', // 总数据条数
        totalPage: '1' // 总页数
      },
      // 表单数据
      dataList: [],

      // 查看详细弹窗
      getDialogShow: false,
      // 点位详细信息
      areaInfo: [],

      // 修改区域弹窗
      setDialogShow: false,
      // 修改区域初始信息
      setAreaF: { },
      // 修改校验规则
      setRules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入', trigger: 'blur' }]
      },

      // 新增模块弹窗
      addDialogShow: false,
      // 新增表单
      addAreaF: {
        regionName: '',
        remark: ''
      },
      // 新增表单验证
      addRules: {
        regionName: [{ required: true, message: '请输入', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getZoneListApi()
  },
  methods: {
    // 获取表单列表数据
    async getZoneListApi() {
      const { data } = await getZoneListApi(this.searchRegion)
      this.dataList = data.currentPageRecords
      this.searchRegion.pageIndex = data.pageIndex
      this.searchRegion.pageSize = data.pageSize
      this.searchRegion.totalCount = data.totalCount
      this.searchRegion.totalPage = data.totalPage
    },
    search() {
      this.getZoneListApi()
    },
    // 上一页
    upPage() {
      if (this.searchRegion.pageIndex > 1) {
        this.searchRegion.pageIndex--
        this.getZoneListApi()
      }
    },
    // 下一页
    nextPage() {
      if (this.searchRegion.pageIndex < this.searchRegion.totalPage) {
        this.searchRegion.pageIndex++
        this.getZoneListApi()
      }
    },
    // 查看详细
    async getInfo({ id, name }) {
      const { data } = await getPTInfoApi({
        pageIndex: this.searchRegion.pageIndex,
        pageSize: this.searchRegion.pageSize,
        regionId: id
      })
      this.areaInfo = data.currentPageRecords
      this.searchRegion.name = name
      this.getDialogShow = true
    },
    // 修改
    setInfo(data) {
      this.setAreaF = data
      this.setDialogShow = true
    },
    // 确定修改
    async setInfoIsOk() {
      // 先校验表单
      await this.$refs.setForm.validate()
      await setAreaInfo(this.setAreaF.id, { regionName: this.setAreaF.name, remark: this.setAreaF.remark })
      this.$message.success('修改成功!')
      this.setDialogShow = false
      // 更新视图
      this.getZoneListApi()
    },
    // 删除地址警告
    deleteIsMark() {
      this.$notify({
        title: '提示',
        message: '演示系统，不支持此操作',
        type: 'warning'
      })
    },
    // 确认新增
    async addInfoIsOk() {
      try {
        await this.$refs.addForm.validate()
        await addAreaIfo(this.addAreaF)
        this.getZoneListApi()
        this.$message.success('新增成功！')
        this.addDialogShow = false
      } catch (error) {
        this.$message.error(error.response.data)
      }
    }
  }
}
</script>

<style scped lang='less'>
.el-input--suffix{
  height: 60px;
}
.info{
  cursor: pointer;
  color: #5f84ff;
  margin-right:10px;
}
.del{
  cursor: pointer;
  color: #ff5a5a;
}
/deep/.el-icon-warning{
  color: #ff7c0f!important;
}
.areainfo{
  padding-left: 70px;
}
.main-zw{
  height: 30px;
  width: 100%;
}
.setAreaF-item{
 padding-left: 75px ;
.setAreaF{
  width: 396px!important;
}
}

</style>
